<template>
  <div id="data-view">
    <dv-full-screen-container style="width: 100%; height: 100%;">
      <top-header />
      <div class="time" @click="dialogVisible = true">按年月查询</div>
      <div class="main-content">
        <digital-flop />
        <div class="block-left-right-content">
          <div class="block-top-bottom-content">
            <div class="block-top-content">
              <dv-border-box-1 style="width: 24%;"></dv-border-box-1>
              <dv-border-box-1 style="width: 38%;">
                <roseChart />
              </dv-border-box-1>
              <dv-border-box-1 style="width: 38%;">
                <scrollBoard />
              </dv-border-box-1>
            </div>
            <div class="block-top-content1">
              <dv-border-box-8 style="width: 20%;">
                <sampling />
              </dv-border-box-8>
              <dv-border-box-8 style="width: 20%;">
                <qualified />
              </dv-border-box-8>
              <dv-border-box-8 style="width: 60%;">
                <cards />
              </dv-border-box-8>
            </div>
          </div>
        </div>
      </div>
    </dv-full-screen-container>
    <el-dialog title="按年月查询" :visible.sync="dialogVisible" width="40%" style="text-align: center;" >
      <el-date-picker v-model="value2" type="month" placeholder="选择月">
      </el-date-picker>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import topHeader from './topHeader'
import digitalFlop from './digitalFlop'
import roseChart from './roseChart'
import waterLevelChart from './waterLevelChart'
import scrollBoard from './scrollBoard'
import cards from './cards'
import sampling from './sampling'
import qualified from './qualified'

export default {
  name: 'DataView',
  components: {
    topHeader,
    digitalFlop,
    roseChart,
    waterLevelChart,
    scrollBoard,
    cards,
    sampling,
    qualified
  },
  data() {
    return {
      dialogVisible: false,
      value2: ''
    }
  },
  methods: {
    submit() {
      console.log(this.value2, '时间')
      this.dialogVisible = false
    }
  }
}
</script>

<style lang="less">
#data-view {
  width: 100%;
  height: 100%;
  color: #fff;

  #dv-full-screen-container {
    background-image: url('./img/bg.png');
    background-size: 100% 100%;
    box-shadow: 0 0 3px blue;
    display: flex;
    flex-direction: column;
    position: relative;
  }

  .time {
    position: absolute;
    right: 100px;
    top: 30px;
    cursor: pointer;
    font-size: 20px;
  }

  .main-content {
    // flex: 0 1 90%;
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .block-left-right-content {
    // flex: 0 1 80%;
    flex: 1;
    display: flex;
    margin-top: 10px;
  }

  .block-top-bottom-content {
    // flex: 0 1 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding-left: 10px;
  }

  .block-top-content {
    height: 50%;
    display: flex;
    flex-grow: 0;
    box-sizing: border-box;
    padding-bottom: 10px;
  }

  .block-top-content1 {
    height: 50%;
    display: flex;
    flex-grow: 0;
    box-sizing: border-box;
    margin-bottom: 20px;

  }
}
</style>
